import React, { useState, useRef } from 'react';
import { 
  Button, 
  Space, 
  Input, 
  Modal, 
  Radio,
  DatePicker,
  Form,
  Row,
  Col,
  Card,
  Divider,
  InputNumber,
  Upload
} from 'antd';
import {
  PlusOutlined,
  DownloadOutlined,
  UploadOutlined,
  DeleteOutlined,
  ClockCircleOutlined,
  SearchOutlined,
  FilterOutlined,
  BorderOutlined,
  MenuUnfoldOutlined,
  SyncOutlined,
  FullscreenOutlined,
  DownOutlined,
  CameraOutlined,
  UserOutlined
} from '@ant-design/icons';
import type { RadioChangeEvent } from 'antd';
import Table5 from "../../Components/Table5";
import Table7 from '../../Components/Table7'
import Table8 from '../../Components/Table8'
const { RangePicker } = DatePicker;
const { Item } = Form;
const { TextArea } = Input;

export default function Xiaoshouchuku() {
  const [form] = Form.useForm();
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [value, setValue] = useState<string>();
  
  const showModal = () => setIsModalOpen(true);
  const handleOk = () => setIsModalOpen(false);
  const handleCancel = () => setIsModalOpen(false);
  
  const onChange2 = (e: RadioChangeEvent) => setValue(e.target.value);

  const onSearch = (value: string) => console.log(value);

  const suffix = <DownOutlined style={{ fontSize: 16, color: '#000' }} />;
  const prefix = <SearchOutlined style={{ fontSize: 16, color: '#000' }} />;
 


   const [isModalOpen1, setIsModalOpen1] = useState(false);
  const showModal1 = () => setIsModalOpen1(true);
  const handleOk1 = () => setIsModalOpen1(false);
  const handleCancel1 = () => setIsModalOpen1(false);
  


  return (
    <div>
      <Space>
        <Space>
          <Button type="primary" onClick={showModal}>
            <PlusOutlined /> 添加
          </Button>
          <Button>
            <DownloadOutlined /> 导入
          </Button>
          <Button>
            <UploadOutlined />导出
          </Button>
          <Button>
            <DeleteOutlined />删除
          </Button>
          <Button>
            <ClockCircleOutlined />操作记录
          </Button>
        </Space>

        <div style={{ marginLeft: "200px" }}>
          <Input.Search
            addonBefore={prefix}
            placeholder="input search text"
            allowClear
            onSearch={onSearch}
            style={{ width: 304 }}
            suffix={suffix}
          />
          <Button>
            <FilterOutlined />筛选
          </Button>
          <Button>
            <BorderOutlined />
          </Button>
          <Button>
            <MenuUnfoldOutlined />
          </Button>
          <Button>
            <SyncOutlined />
          </Button>
          <Button>
            <FullscreenOutlined />
          </Button>
        </div>
      </Space>

      <Modal
        title="销售出库"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        width={1200}
        footer={[
          <Button key="back" onClick={handleCancel}>
            取消
          </Button>,
          <Button key="submit" type="primary" onClick={handleOk}>
            确认
          </Button>,
        ]}
      >
        <Form form={form} layout="vertical" scrollToFirstError>
          <div style={{ maxHeight: "500px", overflow: "auto" }}>
            {/* 销售订单信息 */}
            <Card title="销售订单信息" size="small" style={{ marginBottom: 16 }}>
              <p>默认：出库后，即可智能助手自动生成应收账款明细，进行对账~</p>
              
              <Row gutter={16}>
                <Col span={8}>
                  <Item label={<span className="yanse1">*选择客户</span>} name="salesOrder" rules={[{ required: true }]}>
                    <div onClick={()=>{
                      showModal1()
                    }}>选择数据</div>
                  </Item>
                </Col>
                <Col span={8}>
                  <Item label="销售订单名称" name="orderName">
                    <Input placeholder="自动填充" disabled />
                  </Item>
                </Col>
                <Col span={8}>
                  <Item label="销售订单编码" name="orderCode">
                    <Input placeholder="自动填充" disabled />
                  </Item>
                </Col>
              </Row>

              <Modal
                  open={isModalOpen1}
                    onOk={handleOk1}
                    onCancel={handleCancel1}
                    width={1300}
              >
                <Table8></Table8>
              </Modal>

              <Row gutter={16}>
                <Col span={8}>
                  <Item label="客户名称" name="customerName">
                    <Input placeholder="自动填充" disabled />
                  </Item>
                </Col>
                <Col span={8}>
                  <Item label="客户编码" name="customerCode">
                    <Input placeholder="自动填充" disabled />
                  </Item>
                </Col>
                <Col span={8}>
                  <Item label="客户联系人姓名" name="contactName">
                    <Input placeholder="自动填充" disabled />
                  </Item>
                </Col>
              </Row>

              <Row gutter={16}>
                <Col span={8}>
                  <Item label="客户联系人手机" name="contactPhone">
                    <Input placeholder="自动填充" disabled />
                  </Item>
                </Col>
                <Col span={8}>
                  <Item label="销售负责人" name="salesPerson">
                    <Input placeholder="自动填充" disabled />
                  </Item>
                </Col>
                <Col span={8}>
                  <Item label="销售归属部门" name="salesDepartment">
                    <Input placeholder="自动填充" disabled />
                  </Item>
                </Col>
              </Row>

              <Row gutter={16}>
                <Col span={8}>
                  <Item label="销售出库单编号" name="outboundCode">
                    <Input placeholder="请输入编号" />
                  </Item>
                </Col>
              </Row>
            </Card>

            {/* 出库产品明细 */}
            <Card title="出库产品明细" size="small" style={{ marginBottom: 16 }}>
              <p>销售订单可以提前进行出库规划：库存冻结、计划出库!</p>
              
              <Row gutter={16}>
                <Col span={24}>
                  <Item label={<span className="yanse1">*</span>} name="outboundTag" rules={[{ required: true }]}>
                    <Radio.Group
                      options={[
                        { value: 1, label: '出库' },
                        { value: 2, label: '库存冻结' },
                        { value: 3, label: '计划出库' },
                      ]}
                    />
                  </Item>
                </Col>
              </Row>

              <Row gutter={16}>
                <Col span={8}>
                  <Item label={<span className="yanse1">*</span>} name="warehouse" rules={[{ required: true }]}>
                    <Input placeholder="选择出库仓库" />
                  </Item>
                </Col>
              </Row>

              <Divider orientation="left">产品明细</Divider>
              <Table7></Table7>
                      

              <Row gutter={16}>
                <Col span={8}>
                  <Item label="出库产品总数" name="totalProducts">
                    <InputNumber style={{ width: '100%' }} disabled />
                  </Item>
                </Col>
                <Col span={8}>
                  <Item label="出库产品售价总额(含税)/元" name="totalPrice">
                    <InputNumber style={{ width: '100%' }} disabled />
                  </Item>
                </Col>
              </Row>
            </Card>

            {/* 出库确认 */}
            <Card title="出库确认" size="small" style={{ marginBottom: 16 }}>
              <Row gutter={16}>
                <Col span={8}>
                  <Item label="产品出库确认" name="outboundConfirm">
                    <Radio.Group
                      options={[
                        { value: 1, label: '确认' },
                      ]}
                    />
                  </Item>
                </Col>
                <Col span={16}>
                  <Item label="出库时间" name="outboundTime">
                    <RangePicker
                      showTime={{ format: 'HH:mm' }}
                      format="YYYY-MM-DD HH:mm"
                      style={{ width: '100%' }}
                    />
                  </Item>
                </Col>
              </Row>

              <Row gutter={16}>
                <Col span={8}>
                  <Item label="拍照" name="photo">
                    <Upload listType="picture-card" maxCount={1}>
                      <div>
                        <CameraOutlined />
                        <div style={{ marginTop: 8 }}>上传照片</div>
                      </div>
                    </Upload>
                  </Item>
                </Col>
                <Col span={8}>
                  <Item label="出库员" name="outboundPerson">
                    <Input placeholder="选择成员" prefix={<UserOutlined />} />
                  </Item>
                </Col>
                <Col span={8}>
                  <Item label="库管归属部门" name="warehouseDepartment">
                    <Input placeholder="选择部门" />
                  </Item>
                </Col>
              </Row>
            </Card>

            {/* 收货确认 */}
            <Card title="收货确认" size="small">
              <Row gutter={16}>
                <Col span={8}>
                  <Item label="客户收货确认" name="receiptConfirm">
                    <Radio.Group
                      options={[
                        { value: 1, label: '确认' },
                      ]}
                    />
                  </Item>
                </Col>
                <Col span={16}>
                  <Item label="收获确认时间" name="receiptTime">
                    <RangePicker
                      showTime={{ format: 'HH:mm' }}
                      format="YYYY-MM-DD HH:mm"
                      style={{ width: '100%' }}
                    />
                  </Item>
                </Col>
              </Row>
            </Card>
          </div>
        </Form>
      </Modal>

      <Table5 />
    </div>
  );
}